<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<head>
			<%@include file="/WEB-INF/common/hplus-css.jsp"%>
			<link rel="shortcut icon" href="${path}/favicon.ico" rel="stylesheet">
			<link href="${path}/assets/hplus/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
			<link href="${path}/assets/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
			<link href="${path}/assets/hplus/css/animate.css" rel="stylesheet">
			<link href="${path}/assets/hplus/css/style.css?v=4.1.0" rel="stylesheet">
			<link href="${path}/assets/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
			<link href="${path}/assets/hplus/css/plugins/jsTree/style.min.css" rel="stylesheet">
			<link href="${path}/assets/hplus/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
		</head>

		<body>
			<div class="wrapper wrapper-content  animated fadeInRight">
				<div class="row">
					<div class="col-sm-12">
						<div class="ibox ">
							<div class="ibox-title">
								<h5>区域管理</h5>
							</div>
							<div class="jqGrid_wrapper">
								<div class="ibox-content">
									<div id="jstree"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<%@include file="/WEB-INF/common/hplus-js.jsp"%>
			<!-- Peity -->
			<script src="${path}/assets/hplus/js/plugins/peity/jquery.peity.min.js"></script>
			<script src="${path}/assets/hplus/js/content.js"></script>
			<script src="${path}/assets/hplus/js/plugins/jsTree/jstree.min.js"></script>
			<!-- jqGrid -->
			<script src="${path}/assets/hplus/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
			<script src="${path}/assets/hplus/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

			<script type="text/javascript">
				$(document).ready(function() {
					$('#jstree').data('jstree', false).empty();
					$("#jstree").jstree({
						'state': {
							"opened": true,
						},
						"core": {
							"themes": {
								"responsive": false
							},
							// so that create works
							"check_callback": true,
							'data': function(obj, callback) {
								var jsonstr = "[]";
								var jsonarray = eval('(' + jsonstr + ')');
								$.ajax({
									type: "POST",
									url: "${path}/area/querylist",
									dataType: "json",
									async: false,
									success: function(result) {
										var arrays = result;
										for(var i = 0; i < arrays.length; i++) {
											var arr = {
												"id": arrays[i].id,
												"parent": arrays[i].pid ? arrays[i].pid : "#",
												"text": arrays[i].name
											}
											jsonarray.push(arr);
										}
									}
								});
								callback.call(this, jsonarray);
							}
						},
					}).bind("select_node.jstree", function(event, data) {
						var inst = data.instance;  
		                var selectedNode = inst.get_node(data.selected);
		                var pid = selectedNode.id;
		                var children = data.instance.get_children_dom(selectedNode);
		                if(children.length == 0){
		                	$.ajax({
	                            type: "GET",
	                            url: "${path}/area/children?pid=" + pid,
	                            dataType: "json",
	                            async: false,
	                            success: function(result) {
	                                var arrays = result.areas;
	                                for(var i = 0; i < arrays.length; i++) {
	                                    var item = {
	                                        "id": arrays[i].id,
	                                        "parent": arrays[i].pid ? arrays[i].pid : "#",
	                                        "text": arrays[i].name
	                                    }
	                                    inst.create_node(selectedNode,item,"last");
	                                    inst.open_node(selectedNode);
	                                }
	                            }
	                        });
		                }
		               // data.instance.open_node(selectedNode)
		            });
				});
			</script>
		
		</body>

</html>